<template>
 <div class="post-message" >
   <vue-tribute :options="tributeOptions">
    <textarea class="form-control" id="text-content"  rows="3" v-model.lazy="filterContent"></textarea>
  </vue-tribute>
   <div class="post-message-tools" ref="menu">
     <button class="post-message-btn btn btn-primary" @click="submitMessage">发表</button>
     <router-link @click.native.prevent="choiceImg" to="" class="post-message-img-btn">
       <span class="iconfont icon-home"></span>
       <span>插入一张图片</span>
       <input type="file" accept="image/*" ref="file-picture" style="display: none;" @change="submitFile">
       <span style="padding-left:5px">{{ choiceImgName }}</span>
     </router-link>
   </div>
 </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import VueTribute from 'vue-tribute'
import { createBlog } from 'api/blog'
import { getAtList } from 'api/home'
import { fileMixin } from 'utils/mixin'
import { nextTick } from 'q'
export default {
  name: 'postMessage',
  mixins: [fileMixin],
  components: {
    VueTribute
  },
  data () {
    return {
      content: '',
      choiceImgName: '',
      choiceImgPath: '',
      choiceImgBtn: '',
      tributeOptions: {
        trigger: '@',
        values: async (text, cb) => {
          // 获取atList
          let result = await getAtList()
          if (result.errno === 0) {
            cb(result.data)
            return ''
          }
        },
        lookup: 'value',
        fillAttr: 'value',
        allowSpaces: true,
        requireLeadingSpace: false
      }
    }
  },
  computed: {
    ...mapGetters(['getComment', 'getSubmitBlog']),
    filterContent: {
      get () {
        return this.getComment
      },
      set (value) {
        this.content = value
        this.setComment(value)
      }
    }
  },
  methods: {
    ...mapMutations(['setComment', 'setSubmitBlog']),
    /**
     * 提交微博
     * @method submitMessage
     */
    async submitMessage () {
      let userIngo = {
        content: this.content,
        image: this.choiceImgPath
      }
      // 使用api
      let result = await createBlog(userIngo)
      if (result.errno !== 0) {
        alert(result.message)
        return ''
      }
      // 清空所有数据
      this.content = ''
      this.setComment('')
      this.choiceImgName = ''
      this.choiceImgPath = ''
      // 触发提交
      let flag = this.getSubmitBlog
      this.setSubmitBlog(flag)
    },
    /**
     * 选择微博微博配图
     * @method choiceImg
     */
    choiceImg () {
      this.choiceImgBtn.dispatchEvent(new MouseEvent('click'))
    },
    /**
     * 上传微博配图
     * @method choiceImg
     */
    async submitFile (e) {
      // 上传图片
      let result = await this.uploadFile(e)
      // 上传成功的数据写入
      this.choiceImgName = result.data.name
      this.choiceImgPath = result.data.path
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.choiceImgBtn = this.$refs['file-picture']
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~styles/common';
.post-message{
   position: relative;
  .form-control{
    height: auto;
  }
  #text-content{
    resize: none;
  }
  .post-message-tools{
    margin-top: 10px;
    .post-message-img-btn{
      margin-left: 10px;
      color: #007bff;
      text-decoration: none;
    }
  }
}

</style>
